<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Speed Options for Mouseover Scrolling </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import "css/speed-opts.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_hoverscroll.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayers() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo1 = new dw_scrollObj('wn1', 'lyr1', 't1');
  var wndo2 = new dw_scrollObj('wn2', 'lyr2');

  // Read instructions if your scrolling layers are inside tables 
}

doFilter(){
imagen09.filters.alpha.apply();
imagen09.filters.alpha.opacity = 50;
imagen09.filters.alpha.play();

}
doFilter0(){
imagen09.filters.alpha.apply();
imagen09.filters.alpha.opacity = 0;
imagen09.filters.alpha.play();

}
</script>
</head>
<body onload="initScrollLayers()">

<h1>Scroll-Speed Options in an Image Map</h1>
<img id="imagen09" name="imagen09" src="images/m/09.jpg" onmouseover="doFilter();" onmouseout="doFilter0();" width="175" height="40" alt="">
<p>Different portions of the scroll images provide different speeds for scrolling.</p>

<div id="hold">
  <div id="wn1">
  	<div id="lyr1" class="content">
    <table id="t1" border="0" cellpadding="6" cellspacing="0">
  	 <tr>
  		<td><a href="http://www.dyn-web.com"><img 
			 src="images/m/09.jpg" style="filter:alpha(opacity=20)" width="175" height="50" alt=""></a></td>
  		<td><img src="images/m/09.jpg" style="filter:gray(opacity=60)" width="176" height="60" alt=""></td>
  		<td><img src="images/m/09.jpg" width="132" height="72" alt=""></td>
	        <td><img src="images/m/09.jpg" onmousehover="style='filter:gray alpha(opacity=20)'" width="175" height="40" alt=""></td>
  		<td><img src="images/m/04.jpg" width="176" height="30" alt=""></td>
  		<td><img src="images/m/05.jpg" width="132" height="32" alt=""></td>
	        <td><img src="images/m/06.jpg" width="175" height="40" alt=""></td>
  		<td><img src="images/m/07.jpg" width="176" height="30" alt=""></td>
  		<td><img src="images/m/08.jpg" width="132" height="32" alt=""></td>
     </tr>
    </table>
    </div>
  </div>  <!-- end wn div -->
  
  <!-- Maps for both sets of controls at the end of the document  -->
  <div id="controls">
    <img src="images/map-lft.gif" width="50" height="14" alt="" usemap="#lftaro">
    <img src="images/map-rt.gif" width="50" height="14" alt="" usemap="#rtaro">
  </div>
  
  <div id="wn2">
    <div id="lyr2" class="content">
      <p>Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. </p>
      <p>Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. </p>
      <p>Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. Image maps you create can be any size or shape you like. They can provide any number of speed options for mouseover scrolling. </p>
    </div>  
  </div>
  
  <div id="controls2">
    <div id="up"><img src="images/map-up.gif" width="11" height="35" alt="" usemap="#uparo"></div>
    <div id="down"><img src="images/map-dn.gif" width="11" height="35" alt="" usemap="#dnaro"></div>
  </div>
  
</div>	<!-- end hold div -->


<p><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>


<!-- maps for scroll images -->
<div>
  <map name="lftaro">
    <area alt="" coords="36,0,50,14" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','left', 100)" onmouseout="dw_scrollObj.stopScroll('wn1')">
    <area alt="" coords="22,0,36,14" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','left', 250)" onmouseout="dw_scrollObj.stopScroll('wn1')">
    <area alt="" coords="0,0,22,14" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','left', 500)" onmouseout="dw_scrollObj.stopScroll('wn1')">
  </map>
  
  <map name="rtaro">
    <area alt="" coords="36,0,50,14" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','right', 500)" onmouseout="dw_scrollObj.stopScroll('wn1')">
    <area alt="" coords="22,0,36,14" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','right', 250)" onmouseout="dw_scrollObj.stopScroll('wn1')">
    <area alt="" coords="0,0,22,14" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','right', 100)" onmouseout="dw_scrollObj.stopScroll('wn1')">
  </map>
  
  <map name="uparo">
    <area alt="" coords="0,22,11,35" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','up', 100)" onmouseout="dw_scrollObj.stopScroll('wn2')">
    <area alt="" coords="0,13,11,23" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','up', 250)" onmouseout="dw_scrollObj.stopScroll('wn2')">
    <area alt="" coords="0,0,11,15" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','up', 400)" onmouseout="dw_scrollObj.stopScroll('wn2')">
  </map>
  
  <map name="dnaro">
    <area alt="" coords="0,22,11,35" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','down', 400)" onmouseout="dw_scrollObj.stopScroll('wn2')">
    <area alt="" coords="0,13,11,23" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','down', 250)" onmouseout="dw_scrollObj.stopScroll('wn2')">
    <area alt="" coords="0,0,11,15" href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','down', 100)" onmouseout="dw_scrollObj.stopScroll('wn2')">
  </map>
</div>

</body>
</html>
